<template>
  <rx-dialog @handOk="onSave" btnalign="right" order="top" @cancel="cancel">
    <a-form>
      <a-row>
        <a-col :span="24">
          <a-form-item :labelCol="{span:4}" :wrapperCol="{span:20}"   :label="i18n('form.valueSource','值来源')">
            <a-radio-group v-model="valType">
              <a-radio value="dic">{{i18n('form.dict','数据字典')}}</a-radio>
              <a-radio value="sql">{{i18n('form.customSQL','自定义SQL')}}</a-radio>
              <a-radio value="dialog">{{i18n('list.customDialog','自定义对话框')}}</a-radio>
              <a-radio value="selfData">{{i18n('form.customData','自定义数据')}}</a-radio>
              <a-radio value="grant">{{i18n('form.permissionData','权限数据')}}</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row v-show="valType=='dic'" >
        <a-col :span="24">
          <a-form-item :labelCol="{span:4}" :wrapperCol="{span:18}"  :label="i18n('form.dict','数据字典')">
            <rx-input-button v-model="dicData" @click="selectDic"></rx-input-button>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row v-show="valType=='grant'">
        <a-col :span="24">
          <a-form-item :labelCol="{span:4}" :wrapperCol="{span:18}"  :label="i18n('list.dataPermiss','数据权限')">
            <rx-input-button style="width: 80%" v-model="grantData" ref="grant" @click="openFormEntityDataType"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row v-show="valType=='sql'">
        <a-col :span="24">
          <a-form-item :labelCol="{span:4}" :wrapperCol="{span:18}"  :label="i18n('form.customSQL','自定义SQL')">
            <rx-input-button style="width: 80%" v-model="sqlData" ref="sql" @click="openCustomQuery"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row v-show="valType=='sql'">
        <a-col :span="24">
          <a-form-item :labelCol="{span:4}" :wrapperCol="{span:18}" :label="i18n('form.textField','文本字段')">
            <a-select style="width: 80%" :options="sqlFields" v-model="sql_textfield"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :labelCol="{span:4}" :wrapperCol="{span:18}" :label="i18n('form.numberField','数值字段')">
            <a-select style="width: 80%" :options="sqlFields" v-model="sql_valuefield"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row v-show="valType=='dialog'">
        <a-col :span="24">
          <a-form-item :labelCol="{span:4}" :wrapperCol="{span:18}"  :label="i18n('list.customDialog','自定义对话框')">
            <rx-input-button style="width: 80%;" v-model="dialogData" ref="dialog" @click="selectDialog"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row v-show="valType=='dialog'">
        <a-col :span="24">
          <a-form-item :labelCol="{span:4}" :wrapperCol="{span:18}" :label="i18n('form.textField','文本字段')">
            <a-select style="width: 80%" :options="dialogFields" v-model="dialog_textfield"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :labelCol="{span:4}" :wrapperCol="{span:18}"  :label="i18n('form.numberField','数值字段')">
            <a-select style="width: 80%" :options="dialogFields" v-model="dialog_valuefield"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row v-show="valType=='selfData'">
        <a-col :span="24">
          <a-form-item :labelCol="{span:4}" :wrapperCol="{span:18}"  :label="i18n('form.customData','自定义数据')">
            <div class="table-operator">
              <a-button @click="addRow">{{$ti18('rxList.add','新增')}}</a-button>
              <a-button @click="removeRow">{{$ti18('rxList.delBtn','删除')}}</a-button>
              <a-button @click="upRow">{{i18n('list.upward','向上')}}</a-button>
              <a-button @click="downRow">{{i18n('list.down','向下')}}</a-button>
            </div>
            <rx-grid ref="props"
                     :bordered="true"
                     :allowRowSelect="true"
                     :multiSelect="true"
                     style="min-height:200px;width: 99%;"
                     :dataSource="dataSource"
                     :columns="columns"
                     :showPage="false">
              <span slot="label" slot-scope="{text,record,index,blur}">
                <a-input v-model="record.label" @blur="blur(index,'label',text,record)" />
              </span>
              <span slot="value" slot-scope="{text,record,index,blur}">
                <a-input v-model="record.value" @blur="blur(index,'value',text,record)" />
              </span>
            </rx-grid>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </rx-dialog>
</template>

<script>
  import {RxGrid,Util,Dialog,RxInputButton,RxDialog,App} from "@lowcode/jpaas-common-lib";
  import FormBoListApi from "@/api/form/core/formBoList";


    export default {
      name: "FormBoListFieldRang",
        mixins:[App],
      props:["scope","scope_name","configs","layerid","destroy"],
      components:{
        RxDialog,
        RxGrid,
        RxInputButton
      },
      data(){
          return {
            valType:'',
            sql_textfield:'',
            sql_valuefield:'',
            dialog_textfield:'',
            dialog_valuefield:'',
            dicData:'',
            sqlData:{},
            grantData:{},
            dialogData:{},
            dicKey:'',
            dataSource:[],
            sqlFields:[],
            dialogFields:[],
              columns:[
              {title: this.$ti18('rxList.index','序号'), type: 'indexColumn', width: 80, dataIndex: 'serial', scopedSlots: {customRender: 'serial'}},
              {title: this.i18n('form.name','名称'), dataIndex: 'label', width: 120,allowCellEdit:true,scopedSlots: {customRender: 'label'}},
              {title: this.i18n('form.markName','标识名'), dataIndex: 'value', width: 120,allowCellEdit:true,scopedSlots: {customRender: 'value'}}
            ]
          }
      },
      created() {

          this.initData();
      },
        methods:{
            i18n(name, text, key) {
                return this.$ti18(name, text, "formBoListDialog", key);
            },
        initData(){
          this.valType=this.scope;
          if(this.scope=='dic'){
            this.dicKey=this.configs.dic;
            this.dicData=JSON.stringify({value:this.configs.dic,text:this.configs.dicText});
          }
          if(this.scope=='grant'){
            this.grantData=JSON.stringify({value:this.configs.grant,text:this.configs.grantText});
          }
          if(this.scope=='sql'){
            this.sqlData=JSON.stringify({value:this.configs.sql,text:this.configs.sqlText});
            this.sql_textfield=this.configs.textField;
            this.sql_valuefield=this.configs.valueField;
            this.sqlFields=JSON.parse(this.configs.sqlFields);
          }

          if(this.scope=='dialog'){
            this.dialogData=JSON.stringify({value:this.configs.dialog,text:this.configs.dialogText});
            this.dialog_textfield=this.configs.textField;
            this.dialog_valuefield=this.configs.valueField;
            this.dialogFields=JSON.parse(this.configs.dialogFields);
          }

          if(this.scope=='selfData') {
            this.dataSource=JSON.parse(this.configs.selDatas);
          }
        },
          selectDic(vm){
            var conf = {
              curVm: this, data: {allowTree:true}, widthHeight: ['800px', '600px'],
            }
            let self_ = this;
            Dialog.openSysDicDialog(conf,function (curVue, row) {
              let dicKey = row.alias
              let dicName = self_.$i18(row.name,"名称")
              vm.setVal(dicKey,dicName);
            })
          },
        cancel(){
          Util.closeWindow(this,"cancel");
        },
        onSave(vm){
          Util.closeWindow(this,"ok",this.getData(vm));
        },
        getData(vm){

          if (this.valType==''){
              this.$message.error(this.i18n('selectOne','请至少选择一个！'));
              vm.loading=false
              return;
          }
          if(this.valType=='dic'){
            var dic=JSON.parse(this.dicData).value;
            if(!dic){
              this.$message.error(this.i18n('selDcitTips','请选择数据字典!'));
                vm.loading=false
              return;
            }
            var dicText=JSON.parse(this.dicData).text;
            return {
              scope:this.valType,
              scope_name:this.i18n('form.dict','数据字典')+'(' + dicText + '）',
              configs:{
                dic:dic,
                dicText:dicText
              }
            }
          }

          if(this.valType=='grant'){
            var grantCombo=this.$refs.grant.getVal();
            if(!grantCombo.value){
              this.$message.error(this.i18n('selDataAuthTips','请选择数据权限!'));
              vm.loading=false
              return;
            }
            return {
              scope:this.valType,
              scope_name: this.i18n('list.dataPermiss','数据权限')+'('+grantCombo.text+')',
              configs:{
                grant:grantCombo.value,
                grantText: grantCombo.text
              }
            }
          }

          if(this.valType=='sql'){
            var sqlCombo=this.$refs.sql.getVal();
            if(!sqlCombo.value){
              this.$message.error(this.i18n('selCustomSqlTips','请选择自定义SQL!'));
              vm.loading=false
              return;
            }
            return {
              scope:this.valType,
              scope_name: this.i18n('form.customSQL','自定义SQL')+'('+sqlCombo.text+')',
              configs:{
                sql:sqlCombo.value,
                sqlText: sqlCombo.text,
                textField:this.sql_textfield,
                valueField:this.sql_valuefield,
                sqlFields:JSON.stringify(this.sqlFields)
              }
            }
          }

          if(this.valType=='dialog'){
            var dialogButton=this.$refs.dialog.getVal();
            if(!dialogButton.value){
              this.$message.error(this.i18n('selCustomDialogTips','请选择自定义对话框!'));
              vm.loading=false
              return;
            }
            return {
              scope:this.valType,
              scope_name:this.i18n('list.customDialog','自定义对话框')+'('+dialogButton.text+')',
              configs:{
                dialog:dialogButton.value,
                dialogText:dialogButton.text,
                textField:this.dialog_textfield,
                valueField:this.dialog_valuefield,
                dialogFields:JSON.stringify(this.dialogFields)
              }
            }
          }

          if(this.valType=='selfData') {
            var comboboxGrid=this.$refs.props;
            if (comboboxGrid.getData().length == 0) {
              this.$message.error(this.i18n('noCustomValueTips','没有设置自定义值，请检查！'));
              vm.loading=false
              return;
            }
            return {
              scope:this.valType,
              scope_name:this.i18n('form.customData','自定义数据'),
              configs:{
                selDatas:JSON.stringify(comboboxGrid.getData())
              }
            }
          }
        },
        addRow(){
          this.$refs.props.addRow();
        },
        removeRow(){
          this.$refs.props.removeRows();
        },
        upRow(){
          this.$refs.props.moveUp();
        },
        downRow(){
          this.$refs.props.moveDown();
        },
        selectDialog(vm){
          Dialog.openFormBoListDialog({
            curVm: this, widthHeight: ['800px', '600px'],data:{isDialog:'YES'}
          }, function (self, data) {
            var item=data[0];
            self.loadDialogFields(item);
            vm.setVal(item.key,item.name);
          })
        },
        loadDialogFields(row){
          FormBoListApi.get(row.pkId).then(res=>{
            var data=res.data;
            var fieldsStr=data.fieldsJson;
            if(!fieldsStr) return;
            var fileds=JSON.parse(fieldsStr);
            var ary=[];
            fileds.map(function(item){
              if(item.isReturn) {
                ary.push({
                  value: item.field,
                  label: item.header
                })
              }
            })
            this.dialogFields=ary;
          })
        },
        openFormEntityDataType(vm){
          var self=this;
          var config={curVm:this,widthHeight:['1200px','600px'],data:{multiSelect:false}};
          Dialog.openFormEntityDataTypeDialog(config,function(ary){
            var data=ary[0];
            vm.setVal(data.id,data.name);
          })
        },
        openCustomQuery(vm){
          Dialog.openCustomDataDialog({
            curVm: this, widthHeight: ['1200px', '600px']
          }, function (self, data) {
            self.loadFields(data);
            vm.setVal(data.key,data.name);
          })
        },
        loadFields(row){
          var fieldStr=row.resultField;
          if(!fieldStr) return;
          var fileds=JSON.parse(fieldStr);
          var ary=fileds.map(function(item){
            return {
              value:item.fieldName,
              label:item.comment
            }
          })
          this.sqlFields=ary;
        }
      }
    }
</script>

<style scoped>

</style>